<template>
  <!-- header部分 -->
    <header>
        <p>确认订单</p>
    </header>

  <!-- 订单信息部分 -->
    <div v-if="!address" class="order-info" @click="chooseAddress()">
        <h5>订单配送至：</h5>
        <div class="order-info-address">
            <p>请选择地址</p>
            <font-awesome-icon  :icon="['fas', 'angle-right']" style="color: white;font-size: 6vw;"/>
        </div>
        <p>联系人 电话</p>
    </div>
    <div v-else class="order-info" @click="chooseAddress()">
        <h5>订单配送至：</h5>
        <div class="order-info-address">
            <p>{{address.address}}</p>
            <font-awesome-icon  :icon="['fas', 'angle-right']" style="color: white;font-size: 6vw;"/>
        </div>
        <p>{{address.contactName}} {{address.contactTel}}</p>
    </div>
</template>

<script setup>
import router from "../route/route.js";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
const route = useRoute()

const address = ref(null)
const emit = defineEmits(["getAddress"])
const chooseAddress = ()=>{
    router.push({path:"/userAddress"})
}
onMounted(()=>{
    if (history.state.params){
        address.value = history.state.params
        emit("getAddress",address.value)
    }
})
</script>

<style scoped>
p,h5{
    margin: 0;
}
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 订单信息部分 ******************/
.order-info{
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}
.order-info h5{
    font-size: 3vw;
    font-weight: 300;
    text-align: left;
}
.order-info .order-info-address{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}
.order-info .order-info-address p{
    width: 90%;
    font-size: 5vw;
    text-align: left;
}

.order-info p{
    font-size: 3vw;
    text-align: left;
}
</style>